<script setup>
import {ref} from 'vue'
import { ORDER_STATUS_ENUMS } from '../../utils/config';

const orderMenus=ORDER_STATUS_ENUMS().filter(item=>item.myOrder===true)


const navBottom=ref([
	{
		icon:'vip',
		name:"商家订单",
		tip:"管理商家订单"
	},
	{
		icon:'vip',
		name:"签到记录",
		tip:"已签到n天"
	},
	{
		icon:'vip',
		name:"抽奖记录",
		tip:"已参与n次"
	},
	{
		icon:'vip',
		name:"收获地址",
		tip:"管理收货地址"
	},
	{
		icon:'vip',
		name:"退出登录",
		tip:"退出当前账号"
	}
])

</script>


<template>
	<view class="page-wrap">
		<tar-bar title="我的"></tar-bar>
		<!--头部栏-->
		<view class="head-wrap">
			<view class="top">
				<view class="left">
					<view class="img">
						<image class="image" src="/static/defAvatar.png" mode="aspectFill"></image>
					</view>
					<view class="info">
						<view class="name">
							<view class="text">Shaun</view>
							<view class="tap">正式会员</view>
						</view>
						<view class="id">ID：sjfkjskfjsf</view>
					</view>
				</view>
				<view class="right" :class="{isVip:true}">
					<image class="image" src="/static/vip_icon.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="bottom">
				<view class="nav">
					<view class="icon"><uni-icons color="#BBAF91" size="60rpx" type="calendar"></uni-icons></view>
					<view class="name">每日签到</view>
					<view class="tip">积分+1</view>
				</view>
				<view class="nav">
					<view class="icon"><uni-icons color="#BBAF91" size="60rpx" type="gift"></uni-icons></view>
					<view class="name">我的积分</view>
					<view class="tip">当前53分</view>
				</view>
				<view class="nav">
					<view class="icon"><uni-icons color="#BBAF91" size="60rpx" type="vip"></uni-icons></view>
					<view class="name">会员认证</view>
					<view class="tip">已完成会员认证</view>
				</view>
			</view>
		</view>
		<!--中间栏-->
		<view class="center-wrap">
			<view class="label">
				<view class="name">我的订单</view>
				<view class="right">
					<view class="tip">查看全部</view>
					<uni-icons type="right" size="28rpx"></uni-icons>
				</view>
			</view>
			<view class="nav-list">
				<view class="nav-item" v-for="item in orderMenus" :key="item.value">
					<text class="iconfont" :class="item.icon"></text>
					<view class="tip">{{item.text}}</view>
					<view class="tap">33</view>
				</view>
				
			</view>
		</view>
		<!--底部导航栏-->
		<view class="bottom-wrap">
			<view class="nav-item" v-for="item in navBottom">
				<view class="left">
					<uni-icons color="#BBAF91" :type="item.icon" size="30rpx"></uni-icons>
					<view class="name">{{item.name}}</view>
				</view>
				<view class="right">
					<view class="name">{{item.tip}}</view>
					<uni-icons type="right" color="#aaa" size="30rpx"></uni-icons>
				</view>
			</view>
		</view>
	</view>
	
</template>


<style lang="scss" scoped>
	.page-wrap {
		padding: 36rpx 0;
		width: 100%;
		min-height: 100vh;
		/* #ifdef H5 */
		min-height: calc(100vh - 50px);
		/* #endif */
		background-color: #f5f5f5;
		
		.head-wrap,.center-wrap,.bottom-wrap {
			padding: 36rpx;
			margin: 0 auto;
			width: 90vw;
			height: 420rpx;
			background-color: white;
			border-radius: 10rpx;
			border-bottom: 10px solid #f5f5f5;
			overflow: hidden;
			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.left {
					display: flex;
					gap: 30rpx;
					.img {
						.image {
							width: 100rpx;
							height: 100rpx;
							border-radius: 50%;
						}
					}
					.info{
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						height: 90rpx;
						.name{
							display: flex;
							gap: 20rpx;
							.text{
								font-size: 32rpx;
								font-weight: bold;
							}
							.tap{
								display: flex;
								align-items: center;
								font-size: 26rpx;
								border-radius: 20rpx;
								background: #F0DBAF;
							}
						}
						.id{
							font-size: 25rpx;
							color: #aaa;
						}
					}
				}
				.right{
					margin-bottom: 80rpx;
					filter: grayscale(100%);
					.image{
						width: 120rpx;
						height: 100rpx;
					}
				}
				.isVip{
					filter: grayscale(0);
				}
			}
			.bottom{
				display: flex;
				justify-content: space-between;
				.nav{
					display: flex;
					flex-direction: column;
					align-items: center;
					.name{
						font-size: 30rpx;
						margin-top: 10rpx;
					}
					.tip{
						color: #aaa;
						font-size: 25rpx;
					}
				}
				
				
				
			}
		}
		.center-wrap{
			height: 260rpx;
			padding: 30rpx;
			.label{
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				color: #aaa;
				.right{
					display: flex;
				}
			}
			.nav-list{
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin-top: 40rpx;
				.nav-item{
					display: flex;
					flex-direction: column;
					align-items: center;
					position: relative;
					gap:17rpx;
					.tip{
						font-size: 26rpx;
					}
					.tap{
						position: absolute;
						font-size: 20rpx;
						width: 26rpx;
						height: 26rpx;
						text-align: center;
						right: 3rpx;
						top: -10rpx;
						background: #BBAF91;
						border-radius: 5rpx;
						color: white;
					}
				}
			}
		}
		.bottom-wrap{
			padding: 10rpx 36rpx;
			height: 450rpx;
			.nav-item{
				height: 80rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #f4f4f4;
				.left{
					display: flex;
					align-items: center;
				   .name{
					   font-size: 28rpx;
				   }
				}
				.right{
					display: flex;
					align-items: center;
					.name{
						font-size: 26rpx;
						color: #aaa;
					}
				}
			}
			.nav-item:last-child{
				border: none;
			}
		}
	}
	
</style>